require('../less/sportsData.less');
document.ready(function() {
    axios.defaults.baseURL = "http://139.9.177.51:8099";

    // 画柱状图
    drawHistogram();

    function drawHistogram() {
        // 初始化echarts对象
        let myChart = echarts.init(document.querySelector('#histogram'));
        //写图标的配置
        let option = {
            title: {
                text: '近七天的运动时长'
            },
            xAxis: {
                type: 'category',
                data: ['11/5', '11/6', '11/7', '11/8', '11/9', '11/10']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 30, 140, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
        //画图
        myChart.setOption(option);
    }

    //画饼状图
    drawPieChart();

    function drawPieChart() {
        // 初始化echarts对象
        let myChart = echarts.init(document.querySelector('#pieChart'));
        let option = {
            title: {
                text: '运动分类',
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                y: 'center'
            },
            series: [{
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 25, name: '跑步' },
                    { value: 35, name: '骑行' },
                    { value: 40, name: '训练' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 1,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    }
                },
                label: {
                    normal: {
                        position: 'inner',
                        formatter: '{d}%',
                        color: '#fff'
                    }
                },

            }]
        };
        //画图
        myChart.setOption(option);
    }

    //画条形图
    drawBarChart();

    function drawBarChart() {
        // 初始化echarts对象
        let myChart = echarts.init(document.querySelector('#barChart'));
        let option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    // Use axis to trigger tooltip
                    type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
                }
            },
            title: {
                text: '近七天的运动分类',
            },
            legend: {
                orient: 'vertical',
                x: 'right',
                y: 'center',
                icon: 'rect',
                itemWidth: 10,


            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value'
            },
            yAxis: {
                type: 'category',
                data: ['11/5', '11/6', '11/7', '11/8', '11/9', '11/10']
            },
            series: [{
                    name: '跑步',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [320, 302, 301, 334, 390, 330, 320]
                },
                {
                    name: '骑行',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: '训练',
                    type: 'bar',
                    stack: 'total',
                    label: {
                        show: true
                    },
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
            ]
        };
        //画图
        myChart.setOption(option);
    }





    //画折线图
    drawlineChart();

    function drawlineChart() {

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#lineChart'));
        let option = {
            title: {
                text: '近七天的训练次数'
            },
            xAxis: {
                type: 'category',
                data: ['11/5', '11/6', '11/7', '11/8', '11/9', '11/10']

            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [15, 23, 22, 21, 13, 14, 26],
                type: 'line'
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }






    dataRender();
    //数据渲染
    console.log(parseInt(localStorage.userId));

    function dataRender() {
        axios.get(`/sport/data/${localStorage.userId*1}`)
            .then(function(res) {
                console.log(res.data);
                if (res.data.status == 0) {
                    document.querySelector('#sumTimes').textContent = sumTimes;
                    document.querySelector('#sumDays').textContent = sumDays;
                    document.querySelector('#continueDays').textContent = continueDays;
                }
            })
            .catch(function(err) {
                console.log(err);
            })
    }



    document.querySelector('#backprev').addEventListener('click', function() {
        history.go(-1);
    })




})